<template>
	<view>
		
		<view v-if="form.id" class="sthconnect">
			<view  class="addressINfo">
				
				<view v-if="address.id"  @click="open_pop" class="addressINfo_info">
					<view class="addressINfo_info_use">
						<span style="font-weight: 700; color: #333;">{{address.name}}</span>
						<span>{{address.phone}}</span>
					</view>
					<view class="addressINfo_info_address">
						<span class="uni-ellipsis-2">
							{{address.province}} {{address.city}} {{address.area}} {{address.address}}
						</span>
					</view>
				</view>
				<view v-else class="" @click="toUrl('/pages/addAddresss/addAddresss')"style="color:#6b6b6b;">
					+添加收货地址
				</view>
				<image @click="open_pop" v-if="form.status== 0 && address.id "  style="width: 24rpx; height: 24rpx;"
					src="https://www.mengkahuyu.com/index_png/edit.png" mode=""></image>
			</view>
			<view class="goodsINfo">
				<u-image width="200rpx" height="200rpx" :src="form.spec.pic"></u-image>
				<view class="goodsINfo_right">
					<view class="goodsINfo_right_info">
						<span class="uni-ellipsis-2 food_info_name">{{form.data.name}}</span>
						<span class="uni-ellipsis-2 food_info_name">{{form.spec.sku}}</span>
					</view>
					<view class="goodsINfo_right_bottom">
						<span class="price_box">¥ {{form.data.price}}</span>
						<span class="good_num"><span style="color: #333;margin-right: 10rpx;">数量</span>x{{form.num}}</span>
					</view>
					<!-- form.num -->
				</view>
			</view>
			<view class="sthconnectInfo">
				<view class="info_item">
					<span>
						<span class="xing"></span>
						<span class="info_item_title">订单编号</span>
					</span>
					<div class="info_item_right">
						<input placeholder-class="input"  disabled v-model="form.code" class="input" type="text" placeholder="" />
					</div>
				</view>
				<view class="info_item">
					<span>
						<span class="xing"></span>
						<span class="info_item_title">商品名</span>
					</span>
					<div class="info_item_right">
						<input placeholder-class="input"  disabled v-model="form.data.name" class="input" type="text" placeholder="" />
					</div>
				</view>
				<view class="info_item">
					<span>
						<span class="xing"></span>
						<span class="info_item_title">下单时间</span>
					</span>
					<div class="info_item_right">
						<input placeholder-class="input"  disabled v-model="form.add_time" class="input" type="text" placeholder="" />
					</div>
				</view>
				<view class="info_item">
					<span>
						<span class="xing">	</span>
						<span class="info_item_title">数量</span>
					</span>
					<div class="info_item_right">
						<input maxlength="8" placeholder-class="input" disabled class="input" type="number"  v-model="form.num" placeholder="请输入代购数量" />
					</div>
				</view>
				<view class="info_item">
					<span>
						<span class="xing"></span>
						<span class="info_item_title">合计</span>
					</span>
					<div class="info_item_right">
						<input maxlength="8" placeholder-class="input" disabled class="input" type="number"  v-model="form.price" placeholder="请输入代购数量" />
					</div>
				</view>
			</view>
			<view v-if="form.surplus_time>0 && form.status==0" class="time_box" >
				<u-count-down @end="timeOver" font-size="24" color="#666" separator-color="#666" :timestamp="form.surplus_time" :show-days="false" :show-hours="true"></u-count-down>秒后自动取消订单
			</view>
		</view>
		<view v-if="form.status<=1" class="" style="width: 100%;height: 200rpx;"></view>
		<view v-if="form.status<=1" class="button_submit">
			<u-button v-if="form.surplus_time>0 && form.status==0"  @click="wxPay()" class="btns" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">
				立即支付
			</u-button>
			<u-button v-if="form.status==1" @click="tui_show=true" class="btns" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">
				申请退款
			</u-button>
		</view>
		<u-action-sheet :list="list" @click="onchange" v-model="pop_show"></u-action-sheet>
		<u-popup border-radius="25" v-model="tui_show"  mode="bottom">
			<view class="tui_show">
				<view class="tui_show_title" >退款原因</view>
				<view class="tui_show_text">
					<u-input v-model="tui_text" type="textarea" height="300"  :border="false" placeholder="请输入退款原因" />
				</view>
				<view class="" style="display: flex; justify-content: center;">
					<u-button @click="tui_order(form)" class="btns" :custom-style="{'background':'#90c0ff' ,color:'#fff'}"  :shape="'circle'" :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">
						申请退款
					</u-button>
				</view>
				
			</view>
		</u-popup>
		<u-popup v-model="address_pop_show" mode="bottom" border-radius="14">
			<view class="address_pop_box">
				<view class="address_pop_top">
					<view class="fahup_pop_box_title">
						选择邮寄地址
					</view>
					<view @click="toUrl('/pages/addAddresss/addAddresss')" class="addAddress">
						<image style="width: 24rpx; height: 24rpx;margin-right: 8rpx;"
							src="https://www.mengkahuyu.com/index_png/add_icon.png" mode=""></image>
						<span>添加收件人</span>
					</view>
				</view>
				<scroll-view class="scroll_y_address" scroll-y="true">
					<view class="scroll_padding">
						<view v-for="(ite,ind) in addressList" :key="ind"
							class="address_item">
							<view  @click="chooseAddress(ite ,ind)" class="address_left">
		
								<image v-if="ite.isChoose" style="width: 24rpx; height: 24rpx;"
									src="https://www.mengkahuyu.com/index_png/radio_choose.png" mode=""></image>
								<image v-else style="width: 24rpx; height: 24rpx;"
									src="https://www.mengkahuyu.com/index_png/radio.png" mode=""></image>
							</view>
							<view  @click="chooseAddress(ite ,ind)" class="address_center">
								<view class="centern_top">
									<span class="user_name">
										{{ite.name}}
									</span>
									<span class="user_phone">
										{{ite.phone}}
									</span>
								</view>
								<view class=" centern_top centern_center">
									{{ite.province}}
									{{ite.city}}
									{{ite.area}}
								</view>
								<view class="centern_center centern_top">
									{{ite.address}}
								</view>
							</view>
							<view @click="toUrl('/pages/addAddresss/addAddresss?id='+ite.id)" class="address_left">
								<image  style="width: 24rpx; height: 24rpx;"
									src="https://www.mengkahuyu.com/index_png/edit.png" mode=""></image>
							</view>
		
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import upload from '@/componts/upload/upload.vue';
	export default {
		components:{
		    upload
		},
		data() {
			return {
				tui_show:false,
				tui_text:'',//退款原因
				title:'申请代买',
				list:[
					{text:'韩国仓库' , type:1},
					{text:'日本仓库' , type:2},
				],
				pop_show:false,
				type_text:'请选择寄往仓库',
				imgList:[],
				order_id:null,
				address_pop_show:false, //选择地址弹出层
				addressList:[],
				address:{
					id:null
				},
				form:{}
			}
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id
				this.getInfo(e.id)
			}
		},
		onShow() {
			var token = uni.getStorageSync('token')
			this.getAddress()
			if(!token){
				uni.setStorageSync('isModule' , true)
				uni.showModal({
					title: '登录',
					content: '登录后可使用完整功能',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					success: (res) => {
						uni.setStorageSync('isModule' ,false)
					if(res.confirm) {  
						// console.log('comfirm') //点击确定之后执行的代码
						uni.navigateTo({
							url:'/pages/login/login'
						})
					} else {  
						uni.switchTab({
							url:'/pages/index/index'
						})
						}  
					} 
				})
				return
			}
		},
		methods: {
			open_pop(){
				if(this.form.status==0){
					this.address_pop_show = true
				}
			},
			getAddress(){
				// 获取地址列表
				this.$wqzApi.UserAddress_list({}).then(res => {
					// console.log(res, '地址列表')
					res.data.list.forEach((item, index) => {
						res.data.list[index].isChoose = false
					})
					this.addressList = res.data.list
					if(res.data.list.length>0){
						this.address = res.data.list[0]
					}
				})
			},
			chooseAddress(ite, ind) {
				// 选择收货地址
				this.addressList.forEach((item, index) => {
					if (ind == index) {
						this.addressList[index].isChoose = true
						this.address = item
						this.address_pop_show = false
					} else {
						this.addressList[index].isChoose = false
					}
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			tui_order(item){
				// console.log(item , '需要申请退款的订单')
				if(this.tui_text==''){
					uni.showToast({
						title:'请输入退款原因',	
						icon:'none'
					})
					return
				}
				var data = {
					"id": item.id,
					"remark": this.tui_text
				}
				this.$wqzApi.shop_order_application_refund(data).then(res=>{
					this.current = 2
					this.tui_show = false
					uni.showToast({
						title:'申请成功'
					})
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/good_order_List/good_order_List?current=2'
						})
					},1000)
				})
				
			},
			timeOver(){
				this.form.surplus_time = 0
				this.order_del()
			},
			wxPay(){
				// console.log(this.address , '1111111111')
				if(!this.address.id){
					
					uni.showToast({
						title:"请设置收货地址",
						icon:'none'
					})
					return
				}
				var data = {
					id:this.form.gid,
					order_id:this.form.id,
					num:this.form.num,
					address_id:this.address.id
				}
				var token = uni.getStorageSync('token')
				if(!token){
					uni.setStorageSync('isModule' , true)
					uni.showModal({
						title: '登录',
						content: '登录后可使用完整功能',
						cancelText: "取消", // 取消按钮的文字  
						confirmText: "确认", // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						success: (res) => {
							uni.setStorageSync('isModule' , false)
						if(res.confirm) {  
							// console.log('comfirm') //点击确定之后执行的代码
							uni.navigateTo({
								url:'/pages/login/login'
							})
						} else {  
							uni.switchTab({
								url:'/pages/index/index'
							})
							}  
						} 
					})
					return
				}
				uni.showLoading({
					title:'支付中',
				})
				var that = this
				this.$wqzApi.pay_good(data).then(res=>{
					var data =JSON.parse(res.data)
					// console.log(data , '返回信息')
					// 吊起微信支付
					wx.requestPayment({
					  timeStamp: data.timeStamp,
					  nonceStr: data.nonceStr,
					  package: data.package,
					  signType: 'MD5',
					  paySign: data.paySign,
					  success (res) {
						  uni.hideLoading()
						  uni.showToast({
						  	title:'支付成功',
							icon:'none'
						  })
						  that.pop_show = false
						 	  setTimeout(()=>{
						 		  uni.navigateTo({
						 		  	url:'/pages/good_order_List/good_order_List?current=1&gtype=2'
						 		  })
						 	  },1000)
					  },
					  fail (res) {
						  uni.hideLoading()
						 that.pop_show = false
						  // console.log(res , '支付失败返回')
						  uni.navigateTo({
						  	url:'/pages/good_order_List/good_order_List?current=0&gtype=2'
						  })
					  }
					})
				}).catch(err=>{
					
				})
			},
			order_del(item){
				this.$wqzApi.shop_order_del({id:form.id}).then(res=>{
					this.$refs.paging.reload()	
				})
			},
			getInfo(id){
				var data = {
					id:id
				}
				this.$wqzApi.shop_order_detail(data).then(res=>{
					res.data.data = JSON.parse(res.data.data )
					
					this.form = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url(./index.scss);
	@import url(./complete.scss);
</style>
